<template>
  <div>
    <script :id="id"  :defaultMsg="writeMsg" type="text/plain" ></script>

  </div>
</template>

<script>

import '../../../public/ueditor/ueditor.config.js'
import jquerys from '../../../public/ueditor/third-party/jquery-1.10.2.js'

import '../../../public/ueditor/ueditor.parse.js'
import '../../../public/ueditor/ueditor.all.js'
import '../../../public/ueditor/lang/zh-cn/zh-cn.js'




//引入公式插件
import '../../../public/ueditor/kityformula-plugin/addKityFormulaDialog.js'
import '../../../public/ueditor/kityformula-plugin/getKfContent.js'
import '../../../public/ueditor/kityformula-plugin/defaultFilterFix.js'

// import bus  from  '../test/base/Event.js'
export default {
    name: "UEditor",
    props: {
        id: {
            type: String
        },
        config: {
            type: Object
        },
        writeMsg:{
            type: String
        },
        observerDebounceTime: {
          type: Number,
          default: 50,
          validator: function (value) {
            return value >= 20;
          }
        },
        observerOptions: {
          type: Object,
          default: function () {
            return {
              attributes: true, // 是否监听 DOM 元素的属性变化
              attributeFilter: ['src', 'style', 'type', 'name'], // 只有在该数组中的属性值的变化才会监听
              characterData: true, // 是否监听文本节点
              childList: true, // 是否监听子节点
              subtree: true // 是否监听后代元素
            };
          }
        },
        
    },
    data() {
        return {
            editor: null,
            isinit:false,
        }
    },    
    mounted() {
        //初始化UE
        const _this = this;

        this.editor = UE.delEditor(this.id);
        this.editor = UE.getEditor(this.id,this.config);
      
        this.editor.addListener('ready', ()=>{
            // this.editor.options.fileUrlPrefix = '192.168.4.82'
            setTimeout(()=>{
                if(this.writeMsg!=''){
                    this.editor.setContent(this.writeMsg);
                }
            },200);
            this.$emit('ready', this.editor);
            this.editor.addListener("contentChange", ()=>{

              /*  setTimeout(()=>{
                   this.$emit('input', this.editor.getContent());
                },200);*/

                this.$emit('input', this.editor.getContent());
                // console.log(this.editor.ui.maximumWords, this.editor.getContentTxt().length)
            });

          
            this.isinit=true;
        });
       

 
    },
    destoryed() {
        this.editor.destory();
    },
    methods:{
        maximumWords(){
          if (this.editor.getContentTxt().length > this.editor.ui.maximumWords) {
            return this.$message.error('字数超出最大允许值，服务器可能拒绝保存！')
          }
        },
        getUEContent(){
            return this.editor.getContent();
        },
        getContentTxt(){
            return this.editor.getContentTxt();
        },
        setUEContent(val){

            if(this.isinit){
             return this.editor.setContent(val);
            }else{
                 const _this = this;
                setTimeout(function(){//过段时间在加载
                      _this.setUEContent(val);
                },500)
            }
        },
        hasContent(){
            return this.editor.hasContents();
        },
    }
}
</script>

<style >
    .edui-default .edui-editor-toolbarbox{
        box-shadow:none !important;

    }
    .edui-default .edui-editor-toolbarboxouter{
        background-image: initial !important;
        background-color: #fff !important;
        box-shadow:none !important;
    }
     .edui-toolbar  .edui-for-simpleupload{
      display: none !important;
     }

     .edui-default .edui-toolbar{
      line-height: 1;
     }
</style>